<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/shop.css">
    <title>用户注册</title>
</head>
<body>

<style>
    @font-face {
        font-family: 'huayuan';
        src: url(font/花园肉丸.ttf);
    }

    @font-face {
        font-family: 'cm';
        src: url(font/Begilas.otf);
    }


    .display {
        max-height: 600px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /*.rg{*/
    /*    background-color:transparent;*/
    /*    border: solid 2px black;*/
    /*    border-radius: 5px;*/
    /*    position: relative;*/
    /*    left: 380px;*/
    /*    top: 10px;*/

    /*}*/

    input {
        height: 25px;
        margin-bottom: 5px;
    }

    td {
        border: none;
    }

    select {
        width: 90px;
        height: 30px;
    }

    #draw-border {
        position: relative;
        left: 180px;
    }

    #BackLink{
        top: 13px;
        width: 0;
    }

    #BackLink button{
        margin-left: 0;
    }

</style>

<div class="display">
    <div id="Catalog">
        <form action="/register" method="post">

            <h3>User Information</h3>

            <table>
                <tr>
                    <td>User ID:</td>
                    <td><input type="text" name="username" id="username"/></td>
                    <td>
                        <div id="isExistInfo"></div>
                    </td>
                <tr>
                    <td>New password:</td>
                    <td><input type="password" name="password" id="password"/></td>
                    <td>
                        <div id="isPwd"></div>
                    </td>
                </tr>
                <tr>
                    <td>Repeat password:</td>
                    <td><input type="password" name="repeatPassword" id="repeatPassword"/></td>
                    <td>
                        <div id="isRePwd"></div>
                    </td>
                </tr>
                <!--
                <tr>
                    <td>VerificationCode:</td>
                    <td><input type="text" name="verificationCode"/></td>
                    <td><img id="img" src="verify" alt=""></td>
                </tr>
                -->
                <tr><font color='red' th:text="${registerMsg}" th:if="${registerMsg}!=null"></font></tr>
            </table>

<!--            <%@ include file="accountFields.jsp" %>-->
            <table>
                <tr>
                    <td>First name:</td>
                    <td><input type="text" name="firstname" th:text="${session.account.firstName}"/>
                    </td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><input type="text" name="lastname" th:text="${session.account.lastName}"/></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" name="email" th:text="${session.account.email}" /></td>
                </tr>

                <tr>
                    <td>Phone:</td>
                    <td><input type="text" name="phone" th:text="${session.account.phone}"/></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td><input type="text" name="address1" th:text="${session.account.address1}"/></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><input type="text" name="address2" th:text="${session.account.address2}" /></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><input type="text" name="city" th:text="${session.account.city}"/></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><input type="text" name="state" th:text="${session.account.state}"/></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td> <input type="text" name="zip" th:text="${session.account.zip}"/>
                    </td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><input type="text" name="country" th:text="${session.account.country}"/></td>
                </tr>
            </table>

            <h3>Profile Information</h3>

            <table>
                <tr>
                    <td>Language Preference:</td>
                    <td>
                        <select name="languagePreference">
                            <c:if test="${sessionScope.account==null}">
                                <option value="English">English</option>
                                <option value="Chinese">Chinese</option>
                            </c:if>
                            <c:if test="${sessionScope.account!=null}">
                                <c:if test="${sessionScope.account.languagePreference=='English'}">
                                    <option value="English">English</option>
                                    <option value="Chinese">Chinese</option>
                                </c:if>
                                <c:if test="${sessionScope.account.languagePreference=='Chinese'}">
                                    <option value="Chinese">Chinese</option>
                                    <option value="English">English</option>
                                </c:if>
                            </c:if>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Favourite Category:</td>
                    <td><select name="favouriteCategoryId">
                        <c:if test="${sessionScope.account!=null}">
                            <option value="${sessionScope.account.favouriteCategoryId}" >
                                ${sessionScope.account.favouriteCategoryId}</option>
                            <c:forEach var="category" items="${sessionScope.categories}">
                                <c:choose>
                                    <c:when test="${sessionScope.account.favouriteCategoryId.equals(category.categoryId)}">
<!--TODO:body-->



                                    </c:when>
                                    <c:otherwise>
                                        <option value="${category.categoryId}">${category.categoryId}</option>
                                    </c:otherwise>
                                </c:choose>
                            </c:forEach>
                        </c:if>
                        <c:if test="${sessionScope.account==null}">
                            <c:forEach var="category" items="${sessionScope.categories}">
                                <option value="${category.categoryId}">${category.categoryId}</option>
                            </c:forEach>
                        </c:if>

                    </select></td>
                </tr>
                <tr>
                    <td>Enable MyList</td>
                    <td> <input type="checkbox" id="listOption" name="listOption"  value="listOption"  <c:if test="${sessionScope.account.listOption == true}">checked = "checked" </c:if></td>
                </tr>
                <tr>
                    <td>Enable MyBanner</td>
                    <td> <input type="checkbox" id="bannerOption" name="bannerOption" value="bannerOption" <c:if test="${sessionScope.account.bannerOption == true}">checked = "checked" </c:if>></td>
                </tr>

            </table>


            <div id="BackLink" style="float: left">
                <a href="/signOnForm">
                    <button >login</button>
                </a>
            </div>
            <div id="draw-border">
                <button type="submit">register</button>
            </div>
<!--            <input type="submit" name="newAccount" value="register" class="rg"/>-->
        </form>
    </div>
</div>


</body>
</html>